<style scoped>
  h2{
    text-align: center;
    padding: 30px;
    font-size: 18px;
  }
  #chart_example{
    left:0;
    top:0;
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
  #chart_example1{
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
  #chart_example2{
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
  #chart_example3{
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
  #chart_example4{
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
  #chart_example5{
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }
</style>
<template>
  <div>

    <div class="flex">
       <div class="pic1">
              <h2>总量分列图</h2>
              <div id="chart_example"></div>
          </div>
          <div class = "pic1">
            <h2>浓度图</h2>
              <div id="chart_example1"></div>
          </div>
    </div>


    <div class="flex">
      <div class="pics1">
       <h2>噪音汇总图</h2>
        <div id="chart_example2">
        </div>
      </div>
      <div class="pics1">
       <h2>颗粒浓度</h2>
        <div id="chart_example3">
        </div>
      </div>
    </div>

    <div class="flex">
      <div class="pics2">
       <h2>空气质量</h2>
        <div id="chart_example4">
        </div>
      </div>
      <div class="pics2">
       <h2>空气湿度</h2>
        <div id="chart_example5">
        </div>
      </div>
    </div>


    </div>

  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data() {
      return {}
    },
    mounted() {
      let this_ = this;
      let myChart = echarts.init(document.getElementById('chart_example'));
      let myChart1 = echarts.init(document.getElementById('chart_example1'));
      let myChart2 = echarts.init(document.getElementById('chart_example2'));
      let myChart3 = echarts.init(document.getElementById('chart_example3'));
      let myChart4 = echarts.init(document.getElementById('chart_example4'));
      let myChart5 = echarts.init(document.getElementById('chart_example5'));
      let option = {
        color: ['#rgba(220, 220, 220, 0.8)'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {
            type : 'shadow'
          }
        },
        xAxis : [
          {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value'
          }
        ],
        series : [
          {
            name:'当月粉尘',
            type:'bar',
            barWidth: '30%',
            data:[995,666,444,858,654,236,645,546,846,225,547,356],
            barGap: '20%',
            barCategoryGap: '40%'
          },
          {
            name:'当月噪音',
            type:'bar',
            barWidth: '30%',
            data:[888,555,468,789,132,333,644,988,456,124,756,455],
            color: 'rgba(220, 220, 220, 0.8)'
          }
        ]
      };
      let option1 = {
        xAxis: {
          data: ['区域A', '区域B', '区域C', '区域D', '区域E']
        },
        yAxis: {},
        series: [
          {
            data: [10, 22, 28, 23, 19],
            type: 'line',
            label: {
              show: true,
              position: 'bottom',
              textStyle: {
                fontSize: 20
              }
            }
          }
        ]
      };
      let option2 = {
        legend: {
          orient: 'vertical',
          x: '400px',
          data: ['噪音正常天数', '噪音异常天数']
        },
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              emphasis: {
                show: true
              }
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 335, name: '噪音正常天数' },
              { value: 310, name: '噪音异常天数' },
            ]
          }
        ]
      };
      let option3 = {
            xAxis: {
              data: ['A', 'B', 'C', 'D', 'E']
            },
            yAxis: {},
            series: [
              {
                data: [10, 22, 28, 43, 49],
                type: 'line',
                stack: 'x',
                areaStyle: {}
              }
            ]
          };
      let option4 = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Step Start',
            type: 'line',
            step: 'start',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Step Middle',
            type: 'line',
            step: 'middle',
            data: [220, 282, 201, 234, 290, 430, 410]
          },
          {
            name: 'Step End',
            type: 'line',
            step: 'end',
            data: [450, 432, 401, 454, 590, 530, 510]
          }
        ]
      };
      let option5 = {
            xAxis: {
              data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
            },
            yAxis: {},
            series: [
              {
                type: 'scatter',
                data: [220, 182, 191, 234, 290, 330, 310],
                symbolSize: function(value) {
                  return value / 10;
                }
              }
            ]
          };
      myChart.setOption(option);
      myChart1.setOption(option1);
      myChart2.setOption(option2);
      myChart3.setOption(option3);
      myChart4.setOption(option4);
      myChart5.setOption(option5);

      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize',function() {myChart.resize()});
      window.addEventListener('resize',function() {myChart1.resize()});
      window.addEventListener('resize',function() {myChart2.resize()});
      window.addEventListener('resize',function() {myChart3.resize()});
      window.addEventListener('resize',function() {myChart4.resize()});
      window.addEventListener('resize',function() {myChart5.resize()});
    },
    methods: {},
    watch: {},
    created() {

    }
  }
</script>
<style>
.pic1{
  width:800px;
}
.pics1{
  width:800px;
}
.pics2{
  width:800px;
}
.flex{
  display:flex;
  justifyContent : space-around;
}



</style>
